<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
        *{
            margin: 0;
            padding:0;
        }
        html,body{
            height: 100%;
        }

        body{
            background-color: lightseagreen;
            overflow: hidden;
        }

        .bottom{
            position: absolute;
            bottom:0;
            left:0;
            width: 100%;
            height: 235px;
        }

        .bottom>div{
            position: absolute;
            left:0;
            bottom:0;
            width: 100%;
            height: 100%;
            background: url(1.png) no-repeat bottom left;
            opacity: 0.4;
        }
        .bottom .bottom1{
            animation: upDown 1s infinite alternate;
        }
        .bottom .bottom2{
            background-image:url(2.png) ;
            animation: upDown 1s infinite alternate 0.5s;
        }

        @keyframes upDown {
            0%{
                bottom:0px;
            }

            100%{
                bottom:-30px;
            }
        }


        /* 太阳*/
        .sun{
            width: 80px;
            height: 80px;
            background-color: #ffffff;
            border-radius: 50%;
            position: absolute;
            left:100px;
            top:100px;
        }

        .sun1,.sun2{
            width: 80px;
            height: 80px;
            background-color: #ffffff;
            border-radius: 50%;
            position: absolute;
            left:0;
            top:0;
        }

        .sun1{
            animation: bigger 1s infinite;
        }

        .sun2{
            animation: bigger 1s infinite 0.5s;
        }

        @keyframes bigger {
            0%{
                transform:scale(1);
                opacity: 1;
            }

            100%{
                transform:scale(1.5);
                opacity: 0.1;
            }
        }
    </style>
</head>
<body>
    <div class="sun">
        <div class="sun1"></div>
        <div class="sun2"></div>
    </div>

    <div class="bottom">
        <div class="bottom1"></div>
        <div class="bottom2"></div>
    </div>
</body>
</html>